<template>
  <div class="crm-page report-page">
    <div class="page-header">销售结果</div>
    <div class="page-card pd10">
      <el-row class="page-search" :gutter="10">
        <el-col :xs="24" :sm="12" :md="12" :lg="4" :xl="2">
          <el-select v-model="queryParam.orgType" @change="handleChange">
            <el-option value="2" label="个人" />
            <el-option value="1" label="部门" />
          </el-select>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="4" :xl="2">
          <el-select v-model="queryParam.searchType" @change="handleChange">
            <el-option v-for="d in dateTypes" :key="d.value" :value="d.value" :label="d.label" />
          </el-select>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="4">  <el-button type="primary" @click="handleSearch">搜索</el-button></el-col>
      </el-row>
    </div>
    <div class="page-card ">
      <el-tabs v-model="activeTabName">
        <el-tab-pane label="成交客户分析" name="1" />
      </el-tabs>
      <div class="page-card-content">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <div class="home-sale-card report">
              <div class="sale-card-header">
                <span class="title">客户分析</span>
              </div>
              <div class="sale-card-content">
                <div class="sale-card-item">
                  <span class="card-num" @click="gotNewCustomer(dealData.customerResult.newNumOrAmount)"> {{ dealData.customerResult.newNumOrAmount }}</span>
                  <span class="card-title">新增客户数（个）</span>
                </div>
                <div class="sale-card-item ">

                  <span class="card-num" @click="gotCustomer(dealData.customerResult.successNumOrAmount)">{{ dealData.customerResult.successNumOrAmount }}</span>
                  <span class="card-title">成交客户数（个）</span>

                </div>
                <div class="sale-card-item">
                  <span class="card-num"> {{ getProportion(dealData.customerResult.proportion) }}</span>
                  <span class="card-title">成交率</span>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <div class="home-sale-card report">
              <div class="sale-card-header">
                <span class="title">商机分析</span>
              </div>
              <div class="sale-card-content">
                <div class="sale-card-item">
                  <span class="card-num" @click="gotoNewChance(dealData.businessResult.newNumOrAmount)">  {{ dealData.businessResult.newNumOrAmount }}</span>
                  <span class="card-title">新增商机数（个）</span>

                </div>
                <div class="sale-card-item ">

                  <span class="card-num" @click="gotoChance(dealData.businessResult.successNumOrAmount)">    {{ dealData.businessResult.successNumOrAmount }}</span>
                  <span class="card-title">赢单数（个）</span>

                </div>
                <div class="sale-card-item">
                  <span class="card-num"> {{ getProportion(dealData.businessResult.proportion) }}</span>
                  <span class="card-title">赢单率</span>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <div class="home-sale-card report">
              <div class="sale-card-header">
                <span class="title">金额分析</span>
              </div>
              <div class="sale-card-content">
                <div class="sale-card-item">
                  <span class="card-num" @click="gotoContract(dealData.contractAndPaymentResult.newNumOrAmount)"> {{
                    dealData.contractAndPaymentResult.newNumOrAmount | moneyFormat
                  }}</span>
                  <span class="card-title">合同金额（元）</span>

                </div>
                <div class="sale-card-item ">
                  <span class="card-num" @click="gotoPay( dealData.contractAndPaymentResult.successNumOrAmount)">{{
                    dealData.contractAndPaymentResult.successNumOrAmount
                      | moneyFormat
                  }}</span>
                  <span class="card-title">回款金额（元）</span>

                </div>
                <div class="sale-card-item">
                  <span class="card-num">
                    {{
                      getProportion(dealData.contractAndPaymentResult.proportion)
                    }}
                  </span>
                  <span class="card-title">回款比率</span>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

    </div>
    <div class="page-card ">
      <el-tabs v-model="activeTabName">
        <el-tab-pane label="合同金额分析" name="1" />
      </el-tabs>
      <div class="page-card-content">
        <saleBarChart ref="saleBarChart1" />
      </div>

    </div>
    <div class="page-card ">
      <el-tabs v-model="activeTabName">
        <el-tab-pane label="回款金额分析" name="1" />
      </el-tabs>
      <div class="page-card-content">
        <saleBarChart ref="saleBarChart2" />
      </div>

    </div>
  </div>
</template>
<script>
import saleBarChart from './components/saleBarChart.vue'
import { dateTypes } from '@/utils/enums'

import { getDashboardSaleResult, getDashboardSaleResultSuccess } from '@/api/chart'
import dayjs from 'dayjs'
import './index.scss'
export default {
  name: 'SaleTargets',
  components: { saleBarChart },
  data() {
    return {
      activeTabName: '1',
      dateTypes,
      queryParam: {
        searchType: 7,
        orgType: '2'
      },
      text: '',
      dealData: {
        businessResult: {},
        contractAndPaymentResult: {},
        customerResult: {}
      }

    }
  },
  mounted() {
    this.handleSearch()
  },
  methods: {
    handleChange() {
      this.handleSearch()
    },
    handleSearch() {
      this.loadData()
    },
    gotNewCustomer(v) {
      if (!v || v <= 0) {
        return
      }
      this.gotoMainPage('customer', {
        dateType: this.queryParam.searchType,
        // searchStatus: this.queryParam.orgType，
        orgType: this.queryParam.orgType
      })
    },
    gotCustomer(v) {
      if (!v || v <= 0) {
        return
      }
      this.gotoMainPage('customer', {
        dateType: this.queryParam.searchType,
        // searchStatus: this.queryParam.orgType,
        orgType: this.queryParam.orgType,
        status: '1',
        searchTimeFlag: 2

      })
    },
    gotoNewChance(v) {
      if (!v || v <= 0) {
        return
      }
      this.gotoMainPage('chance', {
        dateType: this.queryParam.searchType,
        // searchStatus: this.queryParam.orgType
        // createBy: this.queryParam.orgType === '1' ? '' : this.USER.userId
        orgType: this.queryParam.orgType
      })
    },
    gotoChance(v) {
      if (!v || v <= 0) {
        return
      }
      this.gotoMainPage('chance', {
        dateType: this.queryParam.searchType,
        // searchStatus: this.queryParam.orgType,
        // createBy: this.queryParam.orgType === '1' ? '' : this.USER.userId,
        saleStage: 5,
        // searchStatus: this.queryParam.orgType,
        // searchTimeFlag: 2,
        orgType: this.queryParam.orgType,
        searchTimeFlag: 2
      })
    },
    gotoContract(v) {
      if (!v || v <= 0) {
        return
      }
      this.gotoMainPage('contract', {
        dateType: this.queryParam.searchType,
        // searchStatus: this.queryParam.orgType,
        status: 3,
        searchTimeFlag: 2,
        orgType: this.queryParam.orgType

      })
    },
    gotoPay(v) {
      if (!v || v <= 0) {
        return
      }
      this.gotoMainPage('payment', {
        dateType: this.queryParam.searchType,
        // searchStatus: this.queryParam.orgType,
        orgType: this.queryParam.orgType,
        status: 3,
        searchTimeFlag: 2

      })
    },
    loadData() {
      // getsalesPerformance 获取销售业绩
      this.getCountData()
      getDashboardSaleResult(this.queryParam).then((res) => {
      //
        const searchType = this.queryParam.searchType
        const data = {
          title: '',
          legend: ['合同金额分析'],
          xAxis: res.contractList.map((m) => {
            // 1-本月、2-上月、3-本季度、4-上季度、5-今年、6-去年、7-本周
            if (searchType === 1 || searchType === 2) {
              return m.day + m.showUnit
            } else if (searchType === 3 || searchType === 4) {
              // 本季度
              return m.month + m.showUnit
            } else if (searchType === 5 || searchType === 6) {
              // 本年
              return m.month + m.showUnit
            } else if (searchType === 7) {
              // 本周
              return m.day + m.showUnit
            }
            return m.month + m.showUnit
          }),
          series: [
            {
              name: '合同金额分析',
              data: res.contractList.map((m) => {
                return this.getValue(searchType, m)
              }),
              type: 'bar'
            }
          ]
        }
        this.$refs.saleBarChart1.initChart(data)
        //
        const data2 = {
          title: '',
          legend: ['回款金额分析'],
          xAxis: res.paymentList.map((m) => {
            if (searchType === 1 || searchType === 2) {
              return m.day + m.showUnit
            } else if (searchType === 3 || searchType === 4) {
              // 本季度
              return m.month + m.showUnit
            } else if (searchType === 5 || searchType === 6) {
              // 本年
              return m.month + m.showUnit
            } else if (searchType === 7) {
              // 本周
              return m.day + m.showUnit
            }
            return m.month + m.showUnit
          }),
          series: [
            {
              name: '回款金额分析',
              data: res.paymentList.map((m) => {
                return this.getValue(searchType, m)
              }),
              type: 'bar'
            }
          ]
        }
        this.$refs.saleBarChart2.initChart(data2)
      })
    },

    getCountData() {
      getDashboardSaleResultSuccess(this.queryParam).then((res) => {
        if (res.businessResult) {
          this.dealData.businessResult = res.businessResult
        }
        if (res.contractAndPaymentResult) {
          this.dealData.contractAndPaymentResult =
              res.contractAndPaymentResult
        }
        if (res.customerResult) {
          this.dealData.customerResult = res.customerResult
        }
      })
    },
    getValue(v, m) {
      const curDay = dayjs().date()
      const curMonth = dayjs().month() + 1
      if (Number(v) === 1 || Number(v) === 2) {
        // 本月
        if (m.day === curDay) {
          return {
            value: m.amount || 0,
            itemStyle: {
              color: '#fe5208'
            }
          }
        }
      } else if (Number(v) === 3 || Number(v) === 4) {
        if (m.month === curMonth) {
          return {
            value: m.amount || 0,
            itemStyle: {
              color: '#fe5208'
            }
          }
        }
      } else if (Number(v) === 5 || Number(v) === 6) {
        if (m.month === curMonth) {
          return {
            value: m.amount || 0,
            itemStyle: {
              color: '#fe5208'
            }
          }
        }
        //
      } else if (Number(v) === 7) {
        if (m.day === curDay) {
          return {
            value: m.amount || 0,
            itemStyle: {
              color: '#fe5208'
            }
          }
        }
      }
      return m.amount || 0
    }
  }
}
</script>
